@use postcss-simple-vars;
@use postcss-nested;

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

body {
  background: #f0f6fc;
  font: 14px/1 'Open Sans', helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  height: 480px;
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e384c;
  border-radius: 6px;
  overflow: hidden;
  &_animated {
    .button {
      &:before {
        animation: button-shadow .25s;
      }
    }
    .bubble {
      &_1 {
        animation: bubble-1 .75s linear -.3s;
      }
      &_2 {
        animation: bubble-2 .75s linear;
      }
      &_3 {
        animation: bubble-3 .75s linear;
      }
    }
  }
}

.button {
  z-index: 15;
  position: absolute;
  width: 50%;
  bottom: 8%;
  left: 25%;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2rem;
  padding: .7rem 0;
  background: none;
  font-weight: 600;
  cursor: pointer;
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    border: inherit;
    border-radius: inherit;
  }
}

.percent {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: lighter;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  &__inner {
    display: inline-block;
  }
  &__num {
    display: inline-block;
    font-size: 6rem;
  }
  &__sign {
    display: inline-block;
    font-size: 4rem;
  }
}

.water {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
  bottom: 0;
  left: 0;
  background: #32bafa;
  transform: translate(0, 50%);
  &__inner {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  
  &__wave {
    width: 200%;
    position: absolute;
    bottom: 100%;
    &_back {
      right: 0;
      fill: #2c7fbe;
      animation: wave-back 1.4s infinite linear;
    }
    &_front {
      left: 0;
      fill: #32bafa;
      margin-bottom: -1px;
      animation: wave-front .7s infinite linear;
    }
  }
}

.bubble {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fff;
  border-radius: 50%;
  transform: scale(0) translate(0, 0);
  opacity: 0;
  &_2 {
    margin-left: -20px;
  }
}

@keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}

@keyframes button-shadow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes bubble-1 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(20px, -25px);
  }
  50% {
    transform: scale(.5) translate(40px, -50px);
  }
  75% {
    transform: scale(.75) translate(20px, -75px);
  }
  100% {
    transform: scale(1) translate(10px, -100px);
  }
}

.tracker {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  height: 74px;
  overflow: hidden;
  z-index: 20;
  &__inner {
    transition: transform .2s ease-in-out;
  }
  &__item {
    transition: opacity .2s ease-in-out;
    font-size: 1.1rem;
    padding-bottom: 10px;
    opacity: .7;
    &_active {
      opacity: 1;
    }
  }
}

@keyframes bubble-2 {
  0% {
    opacity: 1;
    transform: scale(0) translate(-20px, -10px);
  }
  25% {
    transform: scale(.25) translate(-40px, -45px);
  }
  50% {
    transform: scale(.5) translate(-60px, -70px);
  }
  75% {
    transform: scale(.75) translate(-40px, -95px);
  }
  100% {
    transform: scale(1) translate(-30px, -100px);
  }
}

@keyframes bubble-3 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(0, -20px);
  }
  50% {
    transform: scale(.5) translate(-10px, -40px);
  }
  75% {
    transform: scale(.75) translate(10px, -60px);
  }
  100% {
    transform: scale(1) translate(0, -100px);
  }
}